<template>
  <div class="indexAnalysis-container" v-if="!noData">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" v-if="!$isDD" />
    <div class="data_container" :class="!$isDD ? 'indexAnalysisData_container' : ''" @touchmove="handleTouch">
      <detailData
        :curData="curData"
        :data="curData.detailContent"
        :trackParame="trackParame"
        :tendencyData="tendencyData"
        :dateType="curData.dateType"
        @istracked_="istracked_"
        :istracked="istracked"
        @secondaryNumber="secondaryNumber"
        @getIndex="handleIndex"
        @indexModifyPopup="handleModifyPopup"
        @getSortIndex="handleSortIndex"
        :echartsRadarData="curData.echartsRadarData"
        @tendencyDateChange="tendencyDateChange"
        @getAttribution="getAttribution"
      ></detailData>
      <detailPopup
        ref="$detailPopup"
        :curData="curData"
        :pupDimName="pupDimName"
        :isShowPopup.sync="isShowPopup"
        @closeDetailPup="handleCloseDetailPup"
        @handleTrackButtonIn="handleTrackButtonIn"
        @handleTrackButtonOut="handleTrackButtonOut"
        @overLappingPuPDetermine="handleOverLappingPuPDetermine"
        @drilldownPuPDetermine="handleDrilldownPuPDetermine"
        @getAttribution="getAttribution"
        :overlapingItem="overlapingItem"
        :pupValue="pupValue"
        :dataContent="dataContent"
        :dataType="curData.primaryDataType"
        :modifyPup.sync="modifyPup"
        :modifyFilter="modifyFilter"
        :buttonType="buttonType"
        :trackStatusnum="trackStatusnum"
        :trackParame="trackParame"
        :detailsIstracked="detailsIstracked"
      ></detailPopup>
      <div class="loadOver" v-show="curData.detailContent.loadOver">已经到底啦~</div>
    </div>
  </div>
  <div v-else class="noData-container">
    <img src="@/assets/images/no-data.png" alt="" class="noData" />
    <div class="noDataMessage">暂无数据，请切换数据维度</div>
  </div>
</template>

<script>
import {
  getDetailData,
  getDimOptionsData,
  queryTendencyData,
  queryAttribution,
  traceStatus,
  saveFeeds
} from '@/api/home'
import detailData from './detailData.vue'
import detailPopup from './detailPopup.vue'
import sensormixin from '@/mixins'
import { isAnyParamEmpty } from '@/utils'
import _ from 'lodash'

const OpType = {
  drill: 'drill',
  pivot: 'pivot',
  attribution: 'attribution'
}

export default {
  mixins: [sensormixin],
  data() {
    return {
      /** 多次下钻多层次数据存放容器 */
      dataContent: [],
      /** 当前层全部数据，（操作类型，查询参数，返回数据等） */
      curData: {
        queryParams: {},
        detailContent: {}
      },
      title: '',
      /** 当前页面是否无数据 */
      noData: false,
      /** 当前操作是否为修改行为，行为分为：push | update */
      modifyFilter: false,
      /** 弹窗选择列表，维度数据 */
      pupValue: [],
      /** 趋势图数据 */
      tendencyData: null,
      /** 列表点击单行数据 */
      overlapingItem: {},
      /** 是否展示弹窗 */
      isShowPopup: false,
      /**
       * 弹出框的多种状态
       * 0: 不展示维度, 只有上半截
       * 1: 完整弹框，包含维度信息，展示交叉选项
       * 3: 完整弹框，包含维度信息，展示下钻选项
       * 2: 点击完追踪后的形态，下方显示已追踪提示信息
       */
      modifyPup: 0,

      /** 点击弹窗指标信息维度值拼接*/
      pupDimName: '',

      /* start----临时变量，用于传递一些参数----- */

      /* end ---- 临时变量，用于传递一些参数----- */
      /** 追踪的查询参数 */
      trackParame: {},

      // ===============  分 界 线 ==================
      istracked: true, //  false已经被追踪
      secondaryNum: 0,
      detailsIstracked: false, // 详情维度的追踪状态
      trackStatusnum: 0,
      buttonType: '',
      refCodeData: '' // 点击的当前列表code
    }
  },
  components: {
    detailData,
    detailPopup
  },
  created() {
    if (this.$isDD) {
      // 禁止Iphone手机的webview下拉
      this.$dd.ui.webViewBounce.disable()
      this.setTitle()
      this.$dd.ready(() => {
        if (this.$dd.android) {
          document.addEventListener('backbutton', e => {
            // 在这里处理你的业务
            this.dataCtl()
            // 安卓调用方式
            e.preventDefault() // 阻止返回
          })
        } else {
          this.$dd.biz.navigation.setLeft({
            control: true,
            text: '',
            onSuccess: result => {
              // IOS调用方法 ios返回不起作用，需要手动让他返回window.history.go(-1)
              this.dataCtl()
            },
            onFail(err) {
              console.log('返回失败', err)
            }
          })
        }
      })
    }
  },
  mounted() {
    /**
     * ASC 表示从小到大排序
     * DESC 表示从大到小排序
     * sortField 默认给targetCode值。点击指标或者参考系的时候，变成点击值的code
     * */
    this.getqueryUrl()
    this.getDetailData(this.curData.queryParams)
    this.getTendencyData(this.curData.queryParams)
    if (this.curData.operation === OpType.drill) {
      // 下钻埋点
      this.drillDownToAnalyse(
        { fields: this.curData.queryParams.fields, filters: this.curData.queryParams.filters },
        { targetCode: this.curData.queryParams.targetCode }
      )
    } else if (this.curData.operation === OpType.pivot) {
      // 交叉埋点
      this.crossToAnalyse(
        { fields: this.curData.queryParams.fields, filters: this.curData.queryParams.filters },
        { targetCode: this.curData.queryParams.targetCode }
      )
    }
    // 监听滑动
    window.addEventListener('scroll', this.handleScroll)
  },
  watch: {
    'curData.operation': {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.title = newVal === OpType.drill ? '下钻分析' : newVal === OpType.attribution ? '归因分析' : '交叉分析'
        this.setTitle()
      }
    }
  },
  methods: {
    /** 该方法返回一个初始数据层对象 */
    initCurData(operation) {
      return {
        /** 当前层操作 */
        operation: operation,
        /** 当前层查询参数 */
        queryParams: {
          dateType: 'year',
          topic: '',
          id: '',
          queryDate: '',
          operation: operation,
          targetCode: '',
          filters: [],
          page: 1,
          size: 200,
          sort: 'DESC',
          sortField: '',
          fields: []
        },
        /** 下钻或交叉数据 */
        detailContent: {
          fields: [],
          header: {},
          loadOver: false
        },
        /** 主指标的数据类型 */
        primaryDataType: '',
        /** 归因数据 */
        echartsRadarData: {},
        /** 头部数据，指标信息维度值拼接 */
        titleDim: '',
        /** 当前是否被追踪 */
        istracked: false,
        /** 记住当前趋势图的时间类型: day, month, year */
        dateType: 'year'
      }
    },
    /** 根据是否含有分公司，中支公司，支公司，返回filters */
    getBranchFilters(mkt_org_branch, mkt_org_cen_branch, mkt_org_busi_branch) {
      const list = JSON.parse(localStorage.getItem('queryOrgBranchAllList'))
      const filterTemp = []
      if (mkt_org_branch) {
        const branch = list.find(m => m.orgBranchCode === mkt_org_branch)
        if (branch) {
          filterTemp.push({
            code: 'mkt_org_branch',
            value: mkt_org_branch,
            name: branch.orgBranchName.replace('分公司', '')
          })
          if (mkt_org_cen_branch) {
            const cenBranch = branch.subList.find(m => m.orgBranchCode === mkt_org_cen_branch)
            if (cenBranch) {
              filterTemp.push({
                code: 'mkt_org_cen_branch',
                value: mkt_org_cen_branch,
                name: cenBranch.orgBranchName.replace('中心支公司', '')
              })
              if (mkt_org_busi_branch) {
                const busiBranch = cenBranch.subList.find(m => m.orgBranchCode === mkt_org_busi_branch)
                busiBranch &&
                  filterTemp.push({
                    code: 'mkt_org_busi_branch',
                    value: mkt_org_busi_branch,
                    name: busiBranch.orgBranchName.replace('支公司', '')
                  })
              }
            }
          }
        }
      }
      return filterTemp
    },
    /** 计算头部数据的title(指标维度值拼接) */
    getTitleDim(filters) {
      const temp = filters.map(m => m.name).join('-')
      return `${temp && '-'}${temp}`
    },
    /** 选择某个数据行之后，将该行的filters提取出来，用于下钻/交叉/查询维度时扩充的filter条件 */
    getOverlapingItemFilters(fields) {
      return fields
        .filter(m => m.role === 'dim')
        .map(m => {
          return {
            code: m.refCode,
            value: this.overlapingItem[m.refCode],
            name: this.overlapingItem[m.logicCode]
          }
        })
    },
    secondaryNumber(num) {
      this.secondaryNum = num
    },
    istracked_() {
      this.istracked = true
    },
    async handleTrackButtonIn() {
      this.detailsIstracked = true
    },
    async handleTrackButtonOut() {
      const status =
        ['', null, 'null'].includes(this.trackParame.indexValue) &&
        ['', null, 'null'].includes(this.trackParame.comparedValue)
      if (status) {
        this.$toast('该数据不能被追踪')
        return
      }
      const data = await saveFeeds(this.trackParame)
      if (data.success && data.value.addFlag === '0') {
        this.$toast('已追踪，请至"我的"页面查看')
        this.istracked = true
      }
    },
    /** 设置标题 */
    setTitle() {
      if (this.$isDD) {
        this.$dd.ready(() => {
          this.$dd.biz.navigation.setTitle({ title: this.title })
        })
      }
    },
    // 获取单个列表信息 istracked 追踪状态， true已经被追踪
    async handleIndex(isOpenPopup, overlapingItem, refCodeData, operation) {
      this.isShowPopup = true // 打开弹窗
      this.overlapingItem = overlapingItem
      this.refCodeData = refCodeData
      this.modifyFilter = false
      this.buttonType = 'itemButton'
      const scalePremYtd = this.curData.detailContent.fields.find(
        item => item.role === 'measure' && item.type === 'primary'
      )?.logicCode
      const scalePremYoy = this.curData.detailContent.fields.find(
        item => item.role === 'measure' && item.type === 'secondary'
      )?.logicCode
      const orgBranchs = this.curData.detailContent.fields.filter(item => item.role === 'dim')
      const dimensionInfosExtra = orgBranchs.map(orgBranch => {
        return {
          code: orgBranch.refCode,
          value: overlapingItem[orgBranch.refCode],
          name: overlapingItem[orgBranch.logicCode]
        }
      })
      this.trackParame = {
        snapshotTime: this.curData.queryParams.queryDate,
        comparedValue: overlapingItem[scalePremYoy],
        avatorUrl: this.userInfo?.avatar,
        indexValue: overlapingItem[scalePremYtd],
        summarizingKey: this.curData.queryParams.targetCode,
        dateType: this.curData.queryParams.dateType,
        dimensionInfoList: this.curData.queryParams.filters.concat(dimensionInfosExtra)
      }
      const res = await traceStatus(this.trackParame)
      this.detailsIstracked = res.value
      this.getPupOptionData()
    },
    /** 排序 */
    handleSortIndex(code, fieldCode) {
      const queryParamsTemp = _.cloneDeep(this.curData.queryParams)
      this.modifyFilter = true
      queryParamsTemp.page = 1
      queryParamsTemp.sortField = code
      fieldCode.map(item => {
        if (item.code === code) {
          item.sortUp === true ? (queryParamsTemp.sort = 'ASC') : (queryParamsTemp.sort = 'DESC')
        }
      })
      this.curData.queryParams = queryParamsTemp
      this.getDetailData(queryParamsTemp)
    },
    // 修改
    handleModifyPopup(isPopup, operation, buttonType) {
      if (operation === OpType.drill || operation === OpType.attribution) {
        this.modifyPup = 3
      } else if (operation === OpType.pivot) {
        this.modifyPup = 1
      }
      this.buttonType = buttonType
      this.isShowPopup = isPopup
      this.modifyFilter = true
      this.getPupOptionData()
      this.trackParame = this.getCurrentTrackParams()
    },
    /** 关闭弹窗 */
    handleCloseDetailPup() {
      this.isShowPopup = false
      this.modifyPup = 0
      return this.getTrackStatus()
    },
    /**
     * 首次打开页面获取URL路径参数
     */
    getqueryUrl() {
      const {
        dateType,
        topic,
        targetCode,
        id,
        date,
        mkt_org_branch,
        mkt_org_cen_branch,
        mkt_org_busi_branch,
        companyName
      } = this.$route.query
      if (isAnyParamEmpty(id, date, dateType)) {
        this.noData = true
        return
      }
      const temp = this.initCurData(OpType.pivot) // _.cloneDeep(this.curData)
      temp.queryParams = Object.assign(temp.queryParams, {
        id,
        topic,
        dateType,
        targetCode,
        queryDate: date
      })

      const filterTemp = this.getBranchFilters(mkt_org_branch, mkt_org_cen_branch, mkt_org_busi_branch)

      // 如果存在机构维度，则做下钻查询
      if (filterTemp.length > 0) {
        filterTemp[filterTemp.length - 1].name = companyName
        temp.queryParams.operation = OpType.drill
      } else {
        // 如果维度为空,默认为交叉
        temp.queryParams.operation = OpType.pivot
      }
      temp.queryParams.filters = filterTemp
      this.curData = temp
    },
    // 点击返回按钮
    onClickLeft() {
      this.dataCtl()
    },
    // 初始化数据
    initContent() {
      document.documentElement.scrollTop = 0
    },
    refreshAfterBack() {
      this.dataContent.pop()
      this.curData = _.cloneDeep(this.dataContent[this.dataContent.length - 1])
      this.getTendencyData(Object.assign(this.curData.queryParams, { dateType: this.curData.dateType }))
      this.getTrackStatus()
      this.clearLoading()
    },
    /** 点击返回时数据处理函数 */
    dataCtl() {
      if (this.dataContent.length > 1) {
        this.openLoading()
        setTimeout(() => {
          if (this.isShowPopup) {
            // 重置弹窗状态
            this.$refs.$detailPopup.defaultpupShow = 0
            this.handleCloseDetailPup().then(() => {
              this.refreshAfterBack()
            })
          } else {
            this.refreshAfterBack()
          }
        })
      } else {
        this.handleClose()
      }
    },
    /** 关闭下钻页面 */
    handleClose() {
      if (this.$isDD) {
        this.$dd.ready(() => {
          this.$dd.biz.navigation.close({})
        })
      } else {
        this.$router.back()
      }
    },
    /**
     * 点击下钻按钮（底部按钮+弹窗按钮）
     */
    handleDrilldownPuPDetermine(isClose, activeId, titleDim) {
      // 下钻
      this.isShowPopup = isClose
      this.modifyPup = 0
      // 返回顶部
      const drillCurData = _.cloneDeep(this.curData)
      const { queryParams } = drillCurData
      if (!this.modifyFilter) {
        queryParams.filters = queryParams.filters.concat(
          this.getOverlapingItemFilters(drillCurData.detailContent.fields)
        )
        queryParams.id = this.overlapingItem.id
      }

      queryParams.operation = OpType.drill
      queryParams.fields = activeId

      this.dateType = queryParams.dateType

      this.initContent()
      this.getDetailData(queryParams)
      this.getTendencyData(queryParams)
      // 下钻时重新获取追踪状态
      // this.getTrackStatus()
      // 埋点
      this.drillDownToAnalyse(
        { fields: queryParams.fields, filters: queryParams.filters },
        { targetCode: queryParams.filters.targetCode }
      )
    },
    /**
     * 点击交叉（底部按钮+弹窗按钮）
     */
    handleOverLappingPuPDetermine(isClose, activeId, titleDim) {
      // 交叉
      this.isShowPopup = isClose
      this.modifyPup = 0
      const pivotCurData = _.cloneDeep(this.curData)
      const { queryParams } = pivotCurData
      // 初始化状态
      if (!this.modifyFilter) {
        queryParams.filters = queryParams.filters.concat(
          this.getOverlapingItemFilters(pivotCurData.detailContent.fields)
        )
        queryParams.id = this.overlapingItem.id
      }

      queryParams.operation = OpType.pivot
      queryParams.fields = activeId
      this.initContent()
      this.getDetailData(queryParams)
      this.getTendencyData(queryParams)
      // 交叉时重新获取追踪状态
      // this.getTrackStatus()
      // 埋点
      this.crossToAnalyse(
        { fields: queryParams.fields, filters: queryParams.filters },
        { targetCode: queryParams.targetCode }
      )
    },
    /** 加载更多 */
    handleScroll: _.throttle(function() {
      if (this.curData.operation === OpType.attribution) {
        return
      }
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      if (scrollTop + window.innerHeight >= document.body.offsetHeight - 10 && !this.curData.detailContent.loadOver) {
        const queryParamsTemp = _.cloneDeep(this.curData.queryParams)
        queryParamsTemp.page = queryParamsTemp.page + 1
        this.getDetailData(queryParamsTemp, true)
      }
    }, 1000),
    openLoading() {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
    },
    clearLoading() {
      this.$toast.clear()
    },
    // 趋势图日期变化
    tendencyDateChange(date) {
      this.curData.dateType = date
      this.getTendencyData(this.curData.queryParams, date)
    },
    /**
     * 获取下钻页面详情信息
     * params: 查询参数
     * loadmore: 是否为加载更多
     */
    async getDetailData(params, loadmore = false) {
      this.openLoading()
      const res = await getDetailData(params)
      // 获取到接口的值，loading效果关闭
      if (res.errorCode === '0' && res.success) {
        // 判断接口状态
        const value = _.get(res, 'value', {})
        const fields = _.get(value, 'fields', [])

        // 主指标类型判断，放在 detailContent 即可
        const primaryDataType = fields.find(m => m.role === 'measure' && m.type === 'primary').dataType

        if (value.data.content.length < 200) {
          // 表示没有更多数据了，loadOver为true显示文字提示
          value.loadOver = true
        } else {
          value.loadOver = false
        }

        // // 排序，默认主指标升序
        fields.map(item => {
          item.sortDown = false
          item.sortUp = false
          if (item.code === this.curData.queryParams.sortField && this.curData.queryParams.sort === 'ASC') {
            item.sortUp = true
          } else if (item.code === this.curData.queryParams.sortField && this.curData.queryParams.sort === 'DESC') {
            item.sortDown = true
          }
        })

        if (this.modifyFilter) {
          const tempCurData = _.cloneDeep(this.curData)
          if (loadmore) {
            let listTemp = _.get(this.curData.detailContent, 'data.content', [])
            listTemp = listTemp.concat(value.data.content)
            value.data.content = listTemp
          }
          // 修改 则替换整个curData
          tempCurData.operation = params.operation
          tempCurData.queryParams = params
          tempCurData.dateType = params.dateType
          tempCurData.detailContent = value
          tempCurData.primaryDataType = primaryDataType
          this.curData = tempCurData
          this.dataContent.splice(-1, 1, tempCurData)
        } else if (!this.modifyFilter) {
          // 下钻或交叉
          const tempCurData = this.initCurData(params.operation)
          tempCurData.dateType = params.dateType
          tempCurData.queryParams = params
          tempCurData.detailContent = value
          tempCurData.primaryDataType = primaryDataType
          tempCurData.titleDim = this.getTitleDim(params.filters)
          this.curData = tempCurData
          this.dataContent.push(tempCurData)
        }
      } else if (res.errorCode === '507') {
        this.noData = true
      } else {
        // 数据异常
        const tempCurData = this.initCurData(params.operation)
        tempCurData.queryParams = params
        this.curData = tempCurData
        this.dataContent.push(tempCurData)
      }
      this.clearLoading()

      this.getTrackStatus()
    },
    /** 获取维度信息 */
    async getPupOptionData() {
      const { fields } = this.curData.detailContent
      const { filters: pupFilters, topic } = this.curData.queryParams
      let filtersOptions = pupFilters
      // 往下钻的时候，修改过滤条件
      if (!this.modifyFilter) {
        filtersOptions = filtersOptions.concat(this.getOverlapingItemFilters(fields))
      }
      /** 是否可以再定义一个参数传过去*/
      this.pupDimName = this.getTitleDim(filtersOptions)
      // WARNING fields -> filters
      console.log(this.curData.detailContent.fields)
      console.log(this.buttonType)
      const res = await getDimOptionsData({ source: topic, fields: filtersOptions })
      if (res.errorCode === '0' && res.success === true) {
        const value = _.get(res, 'value', [])
        this.pupValue = value.filter(item => {
          // 返回child.status === 0
          item.childValue = item.childValue.filter(child => {
            if (child.status === 0) {
              child.text = child.name
              child.id = child.value
              return child
            }
          })
          item.text = item.dimName
          item.id = item.dimCode
          item.children = item.childValue
          // 子项没有时，父项也不返回
          if (item.childValue.length !== 0) {
            return item
          }
        })
      }
    },
    /** 获取趋势图数据 */
    async getTendencyData(parmas, date) {
      const params_ = JSON.parse(JSON.stringify(parmas))
      if (date) {
        params_.dateType = date
        this.dateType = date
      }
      const res = await queryTendencyData(params_)
      if (res.errorCode === '0' && res.success === true) {
        this.tendencyData = res.value
      } else {
        this.tendencyData = null
      }
    },
    /** 获取归因分析数据 */
    async getAttribution(type) {
      const attributionCurData = _.cloneDeep(this.curData)
      const { queryParams } = attributionCurData
      if (type === 'edit') {
        // 点击数据归因分析，类似下钻
        queryParams.filters = queryParams.filters.concat(
          this.getOverlapingItemFilters(attributionCurData.detailContent.fields)
        )
        queryParams.id = this.overlapingItem.id
      }
      queryParams.operation = OpType.attribution
      queryParams.fields = []
      this.openLoading()
      const res = await queryAttribution(queryParams)
      const detailRes = await getDetailData(queryParams)
      const primaryAttributionType = detailRes.value.fields.find(
        m => m.role === 'measure' && m.type === 'primary'
      ).dataType
      this.isShowPopup = false
      if (res.errorCode === '507') {
        this.$toast('该数据暂无归因分析')
      } else {
        if (type === 'edit') {
          // 列表归因 新建整个curData
          const tempCurData = this.initCurData(queryParams.operation)
          tempCurData.operation = OpType.attribution
          tempCurData.queryParams = queryParams
          tempCurData.echartsRadarData = res.value
          tempCurData.detailContent = detailRes.value
          tempCurData.primaryDataType = primaryAttributionType
          tempCurData.titleDim = this.getTitleDim(queryParams.filters)
          this.curData = tempCurData
          this.dataContent.push(tempCurData)
        } else {
          const tempCurData = _.cloneDeep(this.curData)
          // 修改 则替换整个curData
          tempCurData.operation = OpType.attribution
          tempCurData.queryParams = queryParams
          tempCurData.echartsRadarData = res.value
          tempCurData.detailContent = detailRes.value
          tempCurData.primaryDataType = primaryAttributionType
          this.curData = tempCurData
          this.dataContent.splice(-1, 1, tempCurData)
        }

        this.clearLoading()
      }
    },
    getCurrentTrackParams() {
      const fields = _.get(this.curData.detailContent, 'fields', [])
      const headerContent = _.get(this.curData.detailContent, 'header', {})
      const queryParams = _.get(this.curData, 'queryParams', {})
      const logicCode = fields.find(m => m.role === 'measure' && m.type === 'primary').logicCode
      const headerNumber = headerContent[logicCode]
      const params = {
        comparedValue: this.secondaryNum,
        snapshotTime: queryParams.queryDate,
        avatorUrl: this.userInfo?.avatar,
        indexValue: headerNumber + '',
        summarizingKey: queryParams.targetCode,
        dateType: queryParams.dateType,
        dimensionInfoList: queryParams.filters.length ? queryParams.filters : [{ code: 'mkt_org_branch', value: 'all' }]
      }
      return params
    },
    /** 获取当前维度数据追踪状态 */
    async getTrackStatus() {
      const params = this.getCurrentTrackParams()
      const res = await traceStatus(params)
      if (res.value && res.success) {
        this.istracked = true
      } else {
        this.istracked = false
      }
    },
    handleTouch(e) {
      e._isScroller = true
    }
  }
}
</script>

<style lang="scss" scoped>
.indexAnalysisData_container {
  margin-top: 46px;
}
/deep/.van-sidebar-item--select::before {
  background-color: $main-blue;
}
.indexAnalysis-container {
  -webkit-overflow-scrolling: touch !important;
  display: block;
  padding-bottom: 114px;
  // height: auto !important;
  .data_container {
    min-height: 101%;
    padding: 0 20px;
  }
  .loading {
    position: fixed;
    top: 50%;
    left: 50%;
  }
  /deep/.van-nav-bar__content {
    background-color: $main-bc;
    position: fixed;
    top: 0px;
    width: 100%;
  }
  /deep/.van-nav-bar__title {
    color: #fff;
  }
  /deep/.van-nav-bar__text {
    color: #fff;
  }
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar {
    background-color: transparent;
  }
  /deep/.van-hairline--bottom::after {
    visibility: hidden;
  }
  /deep/.van-button--default {
    background: $light-grey;
    border-color: $light-grey;
    color: #fff;
  }
  /deep/.van-button--info {
    background: $main-blue;
    border: none;
  }
  .loadOver {
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.5);
  }
}
.noData-container {
  width: 375px;
  .noData {
    width: 180px;
    height: 167px;
    margin: 175px auto 0px;
    display: block;
  }
  .noDataMessage {
    text-align: center;
    font-weight: 400;
    color: rgba(233, 233, 237, 0.64);
    line-height: 20px;
    font-size: 14px;
    padding-top: 5px;
  }
}
</style>
